


HTML Coding, Related Writing Advice and Cheat Sheet

by Moon6Shadow



Series: Fandom Meta [7]
Category: Fanwork Research & Reference Guides - Fandom, No Fandom
Genre: Don't copy to another site, Fanwork Research & Reference Guides, Gen, Reposting is only allowed for historic preservation with credit; not for personal or financial gain.
Language: English
Status: In-Progress
Published: 2019-11-11
Updated: 2019-11-11
Packaged: 2021-01-26 19:07:52
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 2,178
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21379063
Author URL: https://archiveofourown.org/users/Moon6Shadow/pseuds/Moon6Shadow
Summary: Ch.1- Whisper (LLF Comment Project) code link for commenters.-Link to useful How To HTML resource and musings about using codes in writing.-Footnote code & Jump/Footnote code eg. skipping traumatic scenes with a footnote summary.Ch.2 Cheat sheet for footnote code 1-20 so you don't have to manually change the numbers every time.
Series: Fandom Meta [7]
Series URL: https://archiveofourown.org/series/1516400
Kudos: 7





	1. Chapter 1

**Author's Note:**

  * Inspired by [Personal Experiment with HTML and CSS](https://archiveofourown.org/works/15685086) by [MohnblumenKind](https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind). 

**Useful links:**

  * [Personal Experiment with HTML and CSS](https://archiveofourown.org/works/15685086/chapters/36443283) by [MohnblumenKind](https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind) (credit for link and original footnote code)

**Useful tags:**

  * [Fanwork Research & Reference Guides](https://archiveofourown.org/tags/Fanwork%20Research%20*a*%20Reference%20Guides/works) and [No Fandom](https://archiveofourown.org/tags/No%20Fandom/works) ([combo](https://archiveofourown.org/works?utf8=%E2%9C%93&work_search%5Bsort_column%5D=revised_at&include_work_search%5Bfandom_ids%5D%5B%5D=5450&work_search%5Bother_tag_names%5D=&work_search%5Bexcluded_tag_names%5D=&work_search%5Bcrossover%5D=&work_search%5Bcomplete%5D=&work_search%5Bwords_from%5D=&work_search%5Bwords_to%5D=&work_search%5Bdate_from%5D=&work_search%5Bdate_to%5D=&work_search%5Bquery%5D=no+fandom&work_search%5Blanguage_id%5D=&commit=Sort+and+Filter&tag_id=Fanwork+Research+*a*+Reference+Guides))

**Coding basics/ Code not working; staying the same?**

When making something to publish on AO3 there is two formats Rich Text and HTML. The buttons will be on the right hand side of the screen above the chapter's text box. Insert the code in Rich Text Format and it will remain as text, insert it into HTML Format and it will work as coding.

**Coding outside of main text eg. italics in comments:**

Coding can allow you to do things outside of the main body of text. eg. italics in comments, links in footnotes. as well as multiple other things. See the Useful Links for more details on coding available.

**Making links to go elsewhere:  
**

Link: <a href=Here goes the URL>Here goes the name you choose</a> 

Signature eg. - Whisper ([ LLF Comment Project](https://longlivefeedback.tumblr.com/llfcommentproject))

Signature Link: - Whisper (<a href="https://longlivefeedback.tumblr.com/llfcommentproject" rel="nofollow"> LLF Comment Project</a>)

Commenters could use this link if they want to Whisper in comments where the creator may not know about the LLF Comment Project. 

Tip: Put this signature code, or a personalised version of it, somewhere you can access it easily like your profile, (private) bookmark, note app etc.

-

You can also make a link in Rich Text format via the 'insert link' (chain icon) then switch to HTML format and cut and paste the coded link to where ever you want to put it. I recommend you make the link at the top of the page so it's easy to find and cut and paste. This also makes it easier, if copy and pasting, to delete the unneeded link from the main body of text.

When cutting and pasting the a's with triangles at the beginning and the end of the code can help you know what to cut. The coding will likely get <p> and </p> around it, this is paragraph coding, you can leave or remove those in the cut and paste. Note, if you leave them you'll likely want to delete them from the main text, if unsure about what coding to delete you can switch back to Rich Text to delete the unnecessary paragraph, spaces, left behind.

* * *

**Footnote:**

Slightly modified footnote code from Ch.3 of [Personal Experiment with HTML and CSS](https://archiveofourown.org/works/15685086/chapters/36443283) by [MohnblumenKind](https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind)

To footnote: <a name="return1" id="return1"></a>**Text here**<sup>[<a href="#note1" title="click to see footnote" >**1**</a>]</sup>

Back to text: <a name="note1" id="note1"></a>**1 Footnote here**<sup>[<a href="#return1" title="return to text" >*****</a>]</sup>

For details on how to use the coding itself check out MohnblumenKind's linked work above. Also preview is your friend when it comes to checking links work correctly.

-

**Need to add a footnote above the others?**

The bits in bold in the code are the bits that are visible when the code is in use. So if for some reason you need to insert another footnote above the others you can just change the numbers in the visible text in the code rather then needing to redo all the numbers in the coding, although make sure you change the numbers in visible text in the _HTML format _or you will break the links.

(Note: The bold star near the end of the 'back to text' code is also visible text although you don't have to change that.)

-

**Coding & Writing Advice:**

I recommend putting the back to text link at the end of the footnote to allow for a smoother reading experience, like MohnblumenKind does. Also when creating footnotes imagine someone reading the footnote as part of the actual text/story and if it will break the mood or be 'too long'.

I not sure where I saw it mentioned (so hopefully I'm remembering correctly) but when you are creating footnotes they need to all be different numbers. So, you can't start over with the numbers every chapter otherwise they won't work when someone uses 'Entire Work' view. If you're a reader who uses 'Entire Work' view and you're having trouble with the footnote links try using 'Chapter by Chapter' view instead. If you're an author who made that mistake (or the coding has just gone crazy for some unknown reason) you can give readers a heads up in the top author's notes on the first chapter (and maybe the first chapter end notes as well, they might be more likely to see it there). Regardless, it's not the end of the world. <3[1]

Also, when mucking around with footnotes I realised the link sends me to exactly where the link itself is, rather then the paragraph, so I need to scroll up a little to see the initial paragraph/sentence and regain my bearings in the story/post. Meanwhile if it was a footnote and I linked to the end of it, I'd be sent to the very end of it and need to scroll up. So when inserting the text into the 'to footnote' code I suggest inserting small paragraphs, or at least the full sentence into the code, rather then just the last word in the sentence. While for 'back to text' coding that entire footnote needs to be inserted into the coding, if you want the 'back to text' link to appear at the end of the footnote. (If you just want to link 'back to text' at the beginning of the footnote you likely don't need to worry about this.)

Side note: Footnotes are great for wry humour. They are also great when you are drafting something and want to add notes or ideas for later if you don't, or can't, use the comment function in Word etc. since you can just jot down a number in the main text and then write the (unlinked) 'footnote' below what you are currently writing with the same number. Although you could start writing an 'official' story footnote that turns into a few hundred words of side details that is way too long and you now need to figure out how to reinsert into the story, despite it not being in story format, that works to. XD Basically they can be really good at getting you to expand on ideas, for later, like dot points combined with the main text.

Dot points are also great for getting down ideas in general, especially if you are struggling to write an actual stories but you have all these ideas in your head. Also for when you have an idea, or ideas, but really don't have time to write it out in full so you just want memory joggers you can expand on later.

* * *

**Jump links for skipping over potentially traumatic scenes and jump summaries via footnotes:  
**

Credit to [MohnblumenKind](https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind) for the brilliant idea of using footnote links to 'jump over'/skip traumatic scenes. They have since updated [Ch.3](https://archiveofourown.org/works/15685086/chapters/39715242) to give an overview of how 'jump' links work. Inspired by that idea, and the ways I've seen authors used warnings, I essentially stuck a 'back to text' and 'jump' code together. This creates a 'jump summary' link where the readers are sent to a footnote that gives them a basic summary of anything important they may miss before they 'jump'/skip over the traumatic content when linking back to text.

Jump Summary Footnote Example: 1 'back to text link' Spoilers: [basic scene summary/anything important the reader might miss] 'jump link'

The placement of the 'back to text' and 'Spoiler' is for people who have learned to automatically click on footnotes and don't want spoilers, or for the people who read the basic overview and decide they are happy to read it.

Coding:

'jump summary' to footnote link: <a name="return1" id="return1"></a>Text here<sup>[<a href="#note1" title="click to see footnote" >jump summary</a>]</sup>

Back to text link: 1 <a name="note1" id="note1"></a><sup>[<a href="#return1" title="return to text" >return to text</a>]</sup> Spoilers: [basic scene summary/anything important the reader might miss] <sup>[<a href="#note2" title="click to jump" >scene skip</a>]</sup>

Place you want the 'jump summary' link to send to: <a name="note2" id="note2"></a><sup>*</sup>

**Notes for the Chapter:**

> 1 I've since found more details about this in [How to Make Linked Footnotes on AO3](https://archiveofourown.org/works/4579026/chapters/10429149) by La_Temperanza or rather the detailed version on Tumblr it [links](https://teekettle.tumblr.com/post/126920988304/live-example-my-ao3-skins-while-ao3-has-a) to. It also mentions what I talk about in the next paragraph. [*]


	2. Footnote Code 1-20 Cheat Sheet

**Summary for the Chapter:**

> Literally just the footnote code for footnote 1-20, so you don't have to manually change the numbers every time.

**Notes for the Chapter:**

> Slightly modified footnote code from Ch.3 of [Personal Experiment with HTML and CSS](https://archiveofourown.org/works/15685086/chapters/36443283) by [MohnblumenKind](https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind)

**To footnote:**

<a name="return1" id="return1"></a>Text here<sup>[<a href="#note1" title="click to see footnote" >1</a>]</sup>

<a name="return2" id="return2"></a>Text here<sup>[<a href="#note2" title="click to see footnote" >2</a>]</sup>

<a name="return3" id="return3"></a>Text here<sup>[<a href="#note3" title="click to see footnote" >3</a>]</sup>

<a name="return4" id="return4"></a>Text here<sup>[<a href="#note4" title="click to see footnote" >4</a>]</sup>

<a name="return5" id="return5"></a>Text here<sup>[<a href="#note5" title="click to see footnote" >5</a>]</sup>

<a name="return6" id="return6"></a>Text here<sup>[<a href="#note6" title="click to see footnote" >6</a>]</sup>

<a name="return7" id="return7"></a>Text here<sup>[<a href="#note7" title="click to see footnote" >7</a>]</sup>

<a name="return8" id="return8"></a>Text here<sup>[<a href="#note8" title="click to see footnote" >8</a>]</sup>

<a name="return9" id="return9"></a>Text here<sup>[<a href="#note9" title="click to see footnote" >9</a>]</sup>

<a name="return10" id="return10"></a>Text here<sup>[<a href="#note10" title="click to see footnote" >10</a>]</sup>

<a name="return11" id="return11"></a>Text here<sup>[<a href="#note11" title="click to see footnote" >11</a>]</sup>

<a name="return12" id="return12"></a>Text here<sup>[<a href="#note12" title="click to see footnote" >12</a>]</sup>

<a name="return13" id="return13"></a>Text here<sup>[<a href="#note13" title="click to see footnote" >13</a>]</sup>

<a name="return14" id="return14"></a>Text here<sup>[<a href="#note14" title="click to see footnote" >14</a>]</sup>

<a name="return15" id="return15"></a>Text here<sup>[<a href="#note15" title="click to see footnote" >15</a>]</sup>

<a name="return16" id="return16"></a>Text here<sup>[<a href="#note16" title="click to see footnote" >16</a>]</sup>

<a name="return17" id="return17"></a>Text here<sup>[<a href="#note17" title="click to see footnote" >17</a>]</sup>

<a name="return18" id="return18"></a>Text here<sup>[<a href="#note18" title="click to see footnote" >18</a>]</sup>

<a name="return19" id="return19"></a>Text here<sup>[<a href="#note19" title="click to see footnote" >19</a>]</sup>

<a name="return20" id="return20"></a>Text here<sup>[<a href="#note20" title="click to see footnote" >20</a>]</sup>

**Back to text:**

<a name="note1" id="note1"></a>1 Footnote here<sup>[<a href="#return1" title="return to text" >*</a>]</sup>

<a name="note2" id="note2"></a>2 Footnote here<sup>[<a href="#return2" title="return to text" >*</a>]</sup>

<a name="note3" id="note3"></a>3 Footnote here<sup>[<a href="#return3" title="return to text" >*</a>]</sup>

<a name="note4" id="note4"></a>4 Footnote here<sup>[<a href="#return4" title="return to text" >*</a>]</sup>

<a name="note5" id="note5"></a>5 Footnote here<sup>[<a href="#return5" title="return to text" >*</a>]</sup>

<a name="note6" id="note6"></a>6 Footnote here<sup>[<a href="#return6" title="return to text" >*</a>]</sup>

<a name="note7" id="note7"></a>7 Footnote here<sup>[<a href="#return7" title="return to text" >*</a>]</sup>

<a name="note8" id="note8"></a>8 Footnote here<sup>[<a href="#return8" title="return to text" >*</a>]</sup>

<a name="note9" id="note9"></a>9 Footnote here<sup>[<a href="#return9" title="return to text" >*</a>]</sup>

<a name="note10" id="note10"></a>10 Footnote here<sup>[<a href="#return10" title="return to text" >*</a>]</sup>

<a name="note11" id="note11"></a>11 Footnote here<sup>[<a href="#return11" title="return to text" >*</a>]</sup>

<a name="note12" id="note12"></a>12 Footnote here<sup>[<a href="#return12" title="return to text" >*</a>]</sup>

<a name="note13" id="note13"></a>13 Footnote here<sup>[<a href="#return13" title="return to text" >*</a>]</sup>

<a name="note14" id="note14"></a>14 Footnote here<sup>[<a href="#return14" title="return to text" >*</a>]</sup>

<a name="note15" id="note15"></a>15 Footnote here<sup>[<a href="#return15" title="return to text" >*</a>]</sup>

<a name="note16" id="note16"></a>16 Footnote here<sup>[<a href="#return16" title="return to text" >*</a>]</sup>

<a name="note17" id="note17"></a>17 Footnote here<sup>[<a href="#return17" title="return to text" >*</a>]</sup>

<a name="note18" id="note18"></a>18 Footnote here<sup>[<a href="#return18" title="return to text" >*</a>]</sup>

<a name="note19" id="note19"></a>19 Footnote here<sup>[<a href="#return19" title="return to text" >*</a>]</sup>

<a name="note20" id="note20"></a>20 Footnote here<sup>[<a href="#return20" title="return to text" >*</a>]</sup>

**Author's Note:**

> Thank you everyone for reading!! <3
> 
> #Fandom for Fun, so not looking for critics but pretty much all polite feedback including Whisper and Murmur comments are totally welcome. If you've left feedback in the form of kudos, bookmarks and/or comments I likely won't see feedback immediately, but I will see it eventually so thank you!! 
> 
> Open series to see my detailed [LLF Comment Project](https://longlivefeedback.tumblr.com/llfcommentproject) statement or see [Poetry and Short Stories](https://archiveofourown.org/series/1007304) series notes for my Blanket Permission Statement but basically, as long as you credit, yes you can.


End file.
